import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import { colors } from 'bee/themes';
import { px2dp } from 'bee/utils';

// @flow
type Props = {
  width?: number,
  height?: number,
  children: Element,
};

class Triangle extends React.Component<Props> {
  static defaultProps = {
    width: px2dp(50),
    height: px2dp(50),
    children: null,
  };

  render() {
    const { width, height, children } = this.props;

    return (
      <View
        style={{
          width: 0,
          borderTopWidth: height,
          borderBottomWidth: width,
          borderLeftWidth: height,
          borderRightWidth: width,
          borderRightColor: colors[1002],
          borderTopColor: colors[1002],
          borderLeftColor: 'transparent',
          borderBottomColor: 'transparent',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <View
          style={{
            position: 'absolute',
            // transform: [{ skewX: '45deg' }],
          }}
        >
          {children}
        </View>
      </View>
    );
  }
}

const TriangleType = ({ title }) => (
  <View
    style={{
      position: 'absolute',
      right: 0,
      top: 0,
    }}
  >
    <Triangle>
      <Text
        style={{
          color: colors.white,
          transform: [{ rotateZ: '45deg' }, { translateY: -px2dp(25) }],
        }}
      >
        {title}
      </Text>
    </Triangle>
  </View>
);

TriangleType.propTypes = {
  title: PropTypes.string,
};

TriangleType.defaultProps = {
  title: '',
};

export default TriangleType;
